<template>
	<view style="padding: 0 40rpx;background-color: #F5F5F5;min-height: 100vh;">
		<image src="/static/me/me_bg.png" mode="" class="bg"></image>

		<view style="position: relative;z-index: 5;padding-top: 246rpx;">
			<view class="user-box">
				<image src="/static/logo.png" mode=""></image>
				<view class="user-text">
					<view class="user-name">
						<view class="">
							一万分之二
						</view>

						<image src="/static/me/authentication.png" mode=""></image>
					</view>

					<view class="">
						认证信息
					</view>
				</view>
			</view>

			<view class="account-card" v-for="item in houseAccountsList">

				<view class="look-btn" @click="navPath(item.id)">
					<text>查看</text> <image src="../../static/me/right.png" mode=""></image>
				</view>
				<view class="title">
					维修资金账户信息
				</view>
				<view class="user">
					业主：{{item.houseProprietors}}
				</view>

				<view class="account">
					<view class="account-item">
						<view class="">
							本金
						</view>
						<view class="">
							￥{{item.principal}}
						</view>
					</view>
					<view class="line">

					</view>
					<view class="account-item">
						<view class="">
							利息
						</view>
						<view class="">
							￥{{item.interest}}
						</view>
					</view>
					<view class="line">

					</view>
					<view class="account-item">
						<view class="">
							余额
						</view>
						<view class="">
							￥{{item.amount}}
						</view>
					</view>
				</view>
			</view>

			<view style="background: #ffffff;border-radius: 20rpx;margin-bottom: 20rpx;">
				<u-cell-group :border="false" :customStyle="{'font-size':'28rpx'}">
					<u-cell title="用户手册" url="/pages/me/changePassword/changePassword" isLink :border="false"></u-cell>
					<u-cell title="问题反馈" url="/pages/me/changeUser/changeUser" isLink :border="false"></u-cell>
					<u-cell title="关于" isLink :border="false">
					</u-cell>
				</u-cell-group>
			</view>


		</view>
<Loading/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				houseAccountsList:[]
			}
		},
		mounted() {
					this.$myRequest('/api/auths').then(res=>{
						uni.setStorageSync('userData', res);
					})
						this.$myRequest('/api/houseAccounts').then(res=>{
							this.houseAccountsList=[...res.data,...res.data]
						})
					
		},
		methods: {
			navPath(id){
				uni.navigateTo({
					url:'/pages/me/houseAccounts/houseAccounts?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100vw;
		height: 758rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.user-box {
		display: flex;
		height: 144rpx;
		margin-bottom: 42rpx;

		>image {
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			margin-right: 26rpx;
		}

		.user-text {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 28rpx;
			color: #3E60FC;

			.user-name {
				display: flex;
				align-items: center;

				view {
					font-size: 32rpx;
					color: #333333;
					font-weight: 700;
				}

				image {
					width: 148rpx;
					height: 62rpx;
					margin-left: 10rpx;
				}
			}
		}
	}


	.account-card {
		height: 250rpx;
		background-image: url(/static/me/card_bg.png);
		background-size: 100% 100%;
		margin-bottom: 20rpx;
		padding: 20rpx 26rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		position: relative;

		.look-btn {
			background-color: #ffffff;
			width: 170rpx;
			height: 52rpx;
			line-height: 52rpx;
			border-top-left-radius: 52rpx;
			border-bottom-left-radius: 52rpx;
			color: #607CFF;
			position: absolute;
			right: 0;
			top: 46rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 36rpx;
				height: 16rpx;
				margin-left: 10rpx;
			}
		}

		.title {
			font-weight: 700;
		}

		.user {}

		.account {
			display: flex;
			align-items: center;
			height: 96rpx;

			.account-item {
				height: 100%;
				text-align: center;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.line {
				width: 2rpx;
				height: 58rpx;
				background-color: #ffffff;
			}
		}
	}
</style>
